<template>
	<view class="content" :style="{height:height+1+'px'}">
		<view  v-for="item in list" @click="goDetails(item.id)">
			<view  class="wrap">
				<view class="img-warp">
					<image class="img" :src="item.cover"></image>
				</view>
				<view class="text-wrap">
					<text class="name">{{item.name}}</text><br/>
					<text class="address">{{item.address}}</text>
					<view>
						<view class="label" v-for="i in item.tags">
							{{i}}
						</view>
					</view>
					<text class="price">{{item.price}}元/㎡</text><br/>
				</view>
			</view>
			<view  class="structure-wrap">
				<view class="structure" v-for="i in item.houseTypes">
					{{i.name+'/'+i.area+'㎡'}}
				</view>
			</view>
		</view>
		<button :loading="loading==1" size="mini" class="load-but" @click="clikeGetData()">
			{{loading==-1?'':loading==1?'正在加载更多':loading==-2?'加载失败,点击重试..':''}}
		</button>
	</view>
</template>

<script>
	import API from '../../common/api.js';
	export default {
		components: {
		},
		data() {
			return {
				height: uni.getSystemInfoSync().windowHeight,
				list:[],
				loading:0,
				page:0
			}
		},
		onLoad() {
			this.getData(true)
		},
		onPullDownRefresh(){
			this.getData(true)
		},
		onReachBottom(){
			if([-1,-2].indexOf(this.loading)<0){
				this.getData()
			}
		},
		methods: {
			clikeGetData(){
				if(this.loading==-2){
					this.getData()
				}
			},
			async getData(flag){
				if(flag){
					uni.showLoading()
				}else{
					this.loading=1
				}
				let json = await API.buildingList({
					checkStatus:'success',
					limit:10,
					page:flag?0:this.page,
					dating:1
					// token: uni.getStorageSync('token')
				});
				if(json.status==200){
					if(flag){
						this.list=json.data
						this.page=0
						uni.stopPullDownRefresh()
						uni.hideLoading()
					}else{
						this.page++
						this.list=this.list.concat(json.data)
					}
					if(json.data.length<10){
						this.loading=-1
					}else{
						this.loading=0
					}
				}else{
					if(flag){
						uni.showModal({
							title: '提示',
							content: '刷新失败，请重试',
							showCancel: false,
						});
						uni.stopPullDownRefresh()
						uni.hideLoading()
					}else{
						uni.showModal({
							title: '提示',
							content: '加载失败，请重试',
							showCancel: false,
						});
						this.loading=-2
					}
				}
			},
			goDetails(id){
				uni.navigateTo({
					url: '../subscribe/details?id='+id
				});
			}
		}
	}
</script>

<style scoped>
	button:after {
		border-width: 0;
	}
	.content {
	}
	.wrap{
		padding:40upx 30upx 0 30upx;
		display: flex;
	}
	.img-warp{
		width: 232upx;
		height: 176upx;
		margin-right: 30upx;
	}
	.img{
		width: 100%;
		height: 100%;
		border-radius: 8upx;
	}
	.text-wrap{
		width:calc(100% - 262upx);
		overflow: hidden;
		text-overflow: ellipsis;
		padding-bottom: 20upx;
	}
	.name{
		color: #000000;
		font-size: 34upx;
		font-family: PingFangSC-regular;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.address{
		color: #999999;
		font-size: 26upx;
		white-space: nowrap;
		font-family: PingFangSC-regular;
	}
	.price{
		color: #f95741;
		font-size: 32upx;
		font-family: PingFangSC-regular;
	}
	.label{
		color: #999999;
		font-size: 22upx;
		font-family: PingFangSC-regular;
		line-height: 30upx;
		border-radius: 4upx;
		margin-bottom: 4upx;
		text-align: center;
		padding: 0 10upx;
		display: inline-block;
		margin-right: 10upx;
		border: 1px solid rgba(213, 213, 213, 1);
	}
	.structure-wrap{
		padding-bottom:40upx;
		display: flex;
		margin-left: 3%;
		width: 94%;
		border-bottom: 1px solid #f4f4f4;
	}
	.structure{
		display: inline-block;
		line-height: 60upx;
		font-size: 24upx;
		background-color: rgba(249, 248, 248, 1);
		text-align: center;
		width: 32%;
		margin-right: 2%;
	}
	.load-but{
		width: 100%;
		border:0px solid white;
		background: white;
	}
</style>
